<template>
  <div v-loading="loading" style="height: 100vh;background-color: var(--lightBg)">
    <div style="width: 100%;height: 1px"></div>
    <div class="background"></div>
    <el-card
        style="width: 900px;height: 500px;margin: 18vh auto;border-radius: 10px;box-shadow:  43px 43px 59px #000000,-43px -43px 59px #ffffff;">
      <!--左半部分-->
      <!--注册1-->
      <div ref="r1" class="containerLeft" style="z-index: 8">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">注册</span>
        <FFAInput placeholder="邮箱" :keydown-enter="getCode" v-model="user.mail"/>
        <FFAInput placeholder="验证码" :keydown-enter="verifyCode" v-model="user.code" class="codeInput" style="margin-bottom: -33px">
          <button style="float: right" ref="codeBtn" @click="getCode" class="getCode">获取验证码
            <span v-if="waitTime!==0">{{ waitTime }}s</span>
          </button>
        </FFAInput>
        <el-button @click="verifyCode" class="btn">→</el-button>
      </div>

      <!--注册2-->
      <div ref="r2" class="containerLeft"
           style="position: absolute;z-index: 3;width: 450px;height: 500px;left: calc(50% - 450px)">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">设置名称</span>
        <FFAInput placeholder="姓名 (用户名)" :keydown-enter="goToR3" v-model="user.name"/>
        <FFAInput placeholder="养老院名" :keydown-enter="goToR3" v-model="user.careHomeName"/>
        <div style="margin: 80px auto 0 ;width: 300px">
          <el-button @click="backToR1" class="btn" style="width: 125px;float: left;margin: 0">←</el-button>
          <el-button @click="goToR3" class="btn" style="width: 125px;float: right;margin: 0">→</el-button>
        </div>
      </div>

      <!--注册3-->
      <div ref="r3" class="containerLeft"
           style="position: absolute;z-index: 2;width: 450px;height: 500px;left: calc(50% - 450px)">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">设置密码</span>
        <FFAInput placeholder="密码" :keydown-enter="register" v-model="user.password" type="password"/>
        <FFAInput placeholder="确认密码" :keydown-enter="register" v-model="user.confirm" type="password"/>
        <div style="margin: 80px auto 0 ;width: 300px">
          <el-button @click="backToR2" class="btn" style="width: 125px;float: left;margin: 0">←</el-button>
          <el-button @click="register" class="btn" style="width: 125px;float: right;margin: 0">→</el-button>
        </div>
      </div>

      <!--注册结果-->
      <div ref="r4" class="containerLeft"
           style="position: absolute;z-index: 1;width: 450px;height: 500px;left: calc(50% - 450px)">
        <el-result v-if="status" style="margin-top: 80px" icon="success" title="注册成功" subTitle="继续将前往登录界面">
          <template slot="extra">
            <el-button @click="changeMode" class="btn" style="margin: 20px auto">→</el-button>
          </template>
        </el-result>
        <el-result v-else style="margin-top: 80px" icon="error" title="注册失败" subTitle="继续将返回注册界面">
          <template slot="extra">
            <el-button @click="backToR3" class="btn" style="margin: 20px auto">←</el-button>
          </template>
        </el-result>
      </div>


      <!--浮动部分-->
      <div ref="float" class="container float">
        <span
            style="text-align: center;font-size: 26px;margin-top: 80px;font-weight: bold;letter-spacing: 3px">至孝智慧养老</span>
        <span style="text-align: center;font-size: 18px;margin-top: 20px">后台管理系统</span>
        <!--        <span style="text-align: center;height: 100px" >
                  LOGO
                </span>-->
        <div class="logo-container">
          <img :src="logo" alt="LOGO" class="logo">
        </div>
        <span v-if="mode" style="text-align: center">没有账号?
          <span @click="changeMode" class="rText">前往注册</span>
        </span>
        <span v-else style="text-align: center">
          <span @click="changeMode" class="rText">返回登录</span>
        </span>
        <div style="width: 200px;margin: 20px auto;display: flex">
          <div style="width: 40px;margin: auto">
            <svg
                style="border-radius: 50%;background-color: white;border: 1px var(--btn) solid;justify-content: center;cursor: pointer;"
                t="1697272725080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5276" width="40" height="40">
              <path
                  d="M347.729118 353.0242c-16.487119 0-29.776737 13.389539-29.776737 29.776737S331.241998 412.677596 347.729118 412.677596s29.776737-13.389539 29.776737-29.776737-13.289617-29.876659-29.776737-29.876659zM577.749415 511.800156c-13.689305 0-24.880562 11.091335-24.880563 24.880562 0 13.689305 11.091335 24.880562 24.880563 24.880562 13.689305 0 24.880562-11.191257 24.880562-24.880562s-11.191257-24.880562-24.880562-24.880562zM500.909446 412.677596c16.487119 0 29.776737-13.389539 29.776737-29.776737s-13.389539-29.776737-29.776737-29.776737c-16.487119 0-29.776737 13.389539-29.776737 29.776737s13.289617 29.776737 29.776737 29.776737zM698.455113 511.600312c-13.689305 0-24.880562 11.091335-24.880562 24.880562 0 13.689305 11.091335 24.880562 24.880562 24.880562 13.689305 0 24.880562-11.091335 24.880562-24.880562-0.099922-13.689305-11.191257-24.880562-24.880562-24.880562z"
                  fill="#00C800" p-id="5277"></path>
              <path
                  d="M511.601093 0.799375C229.12178 0.799375 0.000781 229.820453 0.000781 512.399688s229.021077 511.600312 511.600312 511.600312 511.600312-229.021077 511.600312-511.600312S794.180328 0.799375 511.601093 0.799375z m-90.229508 634.504294c-27.37861 0-49.361436-5.595628-76.839969-10.991413l-76.640125 38.469945 21.882904-65.948477c-54.957065-38.370023-87.73146-87.831382-87.73146-148.084309 0-104.318501 98.722873-186.554254 219.32865-186.554255 107.815769 0 202.34192 65.648712 221.327088 153.979703-6.994536-0.799375-13.989071-1.298985-21.083529-1.298985-104.118657 0-186.454333 77.739266-186.454332 173.564403 0 15.98751 2.498048 31.275566 6.794692 45.964091-6.794692 0.599532-13.689305 0.899297-20.583919 0.899297z m323.547228 76.839969l16.48712 54.757221-60.153006-32.874317c-21.882904 5.495706-43.965652 10.991413-65.848555 10.991413-104.318501 0-186.554254-71.344262-186.554255-159.175644 0-87.631538 82.135831-159.175644 186.554255-159.175644 98.523029 0 186.254489 71.444184 186.254488 159.175644 0.099922 49.461358-32.774395 93.227166-76.740047 126.301327z"
                  fill="#00C800" p-id="5278"></path>
            </svg>
          </div>
        </div>
      </div>

      <!--右半部分-->
      <!--登录1-->
      <div ref="l1" class="containerRight" style="z-index: 5">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">登录</span>
        <FFAInput placeholder="用户名" :keydown-enter="login" v-model="loginUser.name"/>
        <FFAInput placeholder="密码" :keydown-enter="login" v-model="loginUser.password" type="password"/>
        <el-button @click="login" class="btn">→</el-button>
        <div style="width: 300px;margin: auto;font-weight: lighter;font-size: 14px;color: var(--btn)">
          <span @click="goToL2" class="aText" style="float: left">通过邮箱验证码登录</span>
          <span @click="goToL3" class="aText" style="float: right">忘记密码?</span>
        </div>
      </div>
      <!--登录2-->
      <div ref="l2" class="containerRight"
           style="position: absolute;z-index: 4;width: 450px;height: 500px;left: 50%">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">邮箱登录</span>
        <FFAInput placeholder="邮箱" :keydown-enter="getCode2" v-model="loginUser.mail1"/>
        <FFAInput placeholder="验证码" :keydown-enter="verifyCode2" v-model="loginUser.code1" class="codeInput" style="margin-bottom: -33px">
          <button style="float: right" ref="codeBtn2" @click="getCode2" class="getCode">获取验证码
            <span v-if="waitTime!==0">{{ waitTime }}s</span>
          </button>
        </FFAInput>
        <el-button @click="verifyCode2" class="btn">→</el-button>
        <span @click="mailBack" class="aText"
              style="text-align: center;font-weight: lighter;font-size: 14px;color: var(--btn);margin-top: 30px">通过用户名密码登录</span>
      </div>
      <!--找回密码-->
      <div ref="l3" class="containerRight"
           style="position: absolute;z-index: 3;width: 450px;height: 500px;left: 50%">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">找回密码</span>
        <FFAInput placeholder="邮箱" :keydown-enter="getCode3" v-model="loginUser.mail2"/>
        <FFAInput placeholder="验证码" :keydown-enter="verifyCode3" v-model="loginUser.code2" class="codeInput" style="margin-bottom: -33px">
          <button style="float: right" ref="codeBtn3" @click="getCode3" class="getCode">获取验证码
            <span v-if="waitTime!==0">{{ waitTime }}s</span>
          </button>
        </FFAInput>
        <el-button @click="verifyCode3" class="btn">→</el-button>
        <span @click="findBack" class="aText"
              style="text-align: center;font-weight: lighter;font-size: 14px;color: var(--btn);margin-top: 30px">返回登录</span>
      </div>
      <!--找回密码2-->
      <div ref="l4" class="containerRight"
           style="position: absolute;z-index: 2;width: 450px;height: 500px;left: 50%">
        <span style="margin-left: 73px;
                    margin-top: 50px;
                    font-size: 30px;
                    font-weight: lighter;
                    letter-spacing: 3px">设置新的密码</span>
        <FFAInput placeholder="密码" :keydown-enter="changePassword" v-model="loginUser.pass" type="password"/>
        <FFAInput placeholder="确认密码" :keydown-enter="changePassword" v-model="loginUser.confirm" type="password"/>
        <div style="margin: 80px auto 0 ;width: 300px">
          <el-button @click="backToL3" class="btn" style="width: 125px;float: left;margin: 0">←</el-button>
          <el-button @click="changePassword" class="btn" style="width: 125px;float: right;margin: 0">→</el-button>
        </div>
      </div>
      <!--修改密码结果-->
      <div class="containerRight"
           style="position: absolute;z-index: 1;width: 450px;height: 500px;left: 50%">
        <el-result v-if="status" style="margin-top: 80px" icon="success" title="密码修改成功" subTitle="继续将前往登录界面">
          <template slot="extra">
            <el-button @click="reset" class="btn" style="margin: 20px auto">→</el-button>
          </template>
        </el-result>
        <el-result v-else style="margin-top: 80px" icon="error" title="密码修改失败" subTitle="继续将返回设置密码界面">
          <template slot="extra">
            <el-button @click="backToL4" class="btn" style="margin: 20px auto">←</el-button>
          </template>
        </el-result>
      </div>
      <a href="https://beian.miit.gov.cn"
         style="position: absolute;bottom: 10px;text-align: center;left: calc(50% - 450px);right: calc(50% - 450px);cursor: pointer">
        冀ICP备案号2023040066
      </a>
    </el-card>
  </div>

</template>

<script>
import logo from '@/assets/logo.png';
import {setRoutes} from "@/router";
import FFAInput from "@/form-item/FFAInput";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  components: {FFAInput},

  data() {
    return {
      //新建用户
      user: {},
      //登录用户
      loginUser: {},
      //加载中
      loading: false,
      //是否为登陆状态
      mode: true,
      //获取验证码禁用
      waitTime: 0,
      //注册成功与否
      status: false,
      //计时器
      timer1: null,
      timer2: null,
      timer3: null,
      to1: null,
      to2: null,
      to3: null,
      logo: logo // 使用import引入的图片
    }
  },
  methods: {
    //用户名密码登录
    login() {
      this.loading = true
      //加密密码
      const md5Password = this.loginUser.password ? this.md5(this.loginUser.password) : ''
      this.request.post("/user/login", {
        name: this.loginUser.name,
        password: md5Password
      }).then(res => {
        if (res.code !== '200') {
          //登陆失败
          this.$notify({
            title: '登录失败',
            message: res.msg,
            type: 'error'
          })
          //清空密码框
          this.loginUser.password = ''
          this.loading = false
        } else {
          //登录成功
          this.loginSuccess(res)
        }
      }).catch(err => {
        this.$notify({
          title: '登录失败',
          message: err,
          type: 'error'
        });
        //清空密码框
        this.loginUser.password = ''
        this.loading = false
      })
    },
    //切换至注册或登录
    changeMode() {
      if (this.mode) {
        //右移至注册
        this.$refs.float.style.left = '50%'
        this.$refs.float.style.borderRadius = '0 10px 10px 0'
      } else {
        //左移至登录
        this.$refs.float.style.left = 'calc(50% - 450px)'
        this.$refs.float.style.borderRadius = '10px 0 0 10px'
      }
      //改写状态
      this.mode = !this.mode
      this.reset()
    },
    //重置除float外的所有界面位置
    reset() {
      this.$refs.r1.style.left = 'calc(50% - 450px)'
      this.$refs.r2.style.left = 'calc(50% - 450px)'
      this.$refs.r3.style.left = 'calc(50% - 450px)'
      this.$refs.l1.style.right = '0'
      this.$refs.l2.style.left = '50%'
      this.$refs.l3.style.left = '50%'
      this.$refs.l4.style.left = '50%'
      this.user = {}
      this.loginUser = {}
    },
    //获取验证码注册
    getCode() {
      //禁用按钮，
      this.$refs.codeBtn.disabled = true
      this.$refs.codeBtn.classList.add('disabled')
      //发送请求
      this.request.get('/manager/sign-code', {params: {mail: this.user.mail ? this.user.mail : ''}}).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '发送失败',
            message: res.msg
          })
          //恢复禁用
          this.$refs.codeBtn.disabled = false
          this.$refs.codeBtn.classList.remove('disabled')
        } else {
          //发送成功
          this.$notify({
            type: 'success',
            title: '发送成功',
            message: '验证码已发送至' + this.user.mail
          })
          //显示等待时间，每秒减一次
          this.waitTime = 60
          this.timer1 = setInterval(() => {
            if (this.waitTime > 0) {
              this.waitTime--
            }
          }, 1000)
          //1分钟后恢复按钮禁用
          this.to1 = setTimeout(() => {
            this.$refs.codeBtn.disabled = false
            this.$refs.codeBtn.classList.remove('disabled')
          }, 60000)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '发送失败',
          message: err
        })
        //恢复禁用
        this.$refs.codeBtn.disabled = false
        this.$refs.codeBtn.classList.remove('disabled')
      })
    },
    //获取验证码登录
    getCode2() {
      //禁用按钮，
      this.$refs.codeBtn2.disabled = true
      this.$refs.codeBtn2.classList.add('disabled')
      //发送请求
      this.request.get('/manager/login-code', {params: {mail: this.loginUser.mail1 ? this.loginUser.mail1 : ''}}).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '发送失败',
            message: res.msg
          })
          //恢复禁用
          this.$refs.codeBtn2.disabled = false
          this.$refs.codeBtn2.classList.remove('disabled')
        } else {
          //发送成功
          this.$notify({
            type: 'success',
            title: '发送成功',
            message: '验证码已发送至' + this.loginUser.mail1
          })
          //显示等待时间，每秒减一次
          this.waitTime = 60
          this.timer2 = setInterval(() => {
            if (this.waitTime > 0) {
              this.waitTime--
            }
          }, 1000)
          //1分钟后恢复按钮禁用
          this.to2 = setTimeout(() => {
            this.$refs.codeBtn2.disabled = false
            this.$refs.codeBtn2.classList.remove('disabled')
          }, 60000)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '发送失败',
          message: err
        })
        //恢复禁用
        this.$refs.codeBtn2.disabled = false
        this.$refs.codeBtn2.classList.remove('disabled')
      })
    },
    //获取验证码修改密码
    getCode3() {
      //禁用按钮，
      this.$refs.codeBtn3.disabled = true
      this.$refs.codeBtn3.classList.add('disabled')
      //发送请求
      this.request.get('/manager/change-code', {params: {mail: this.loginUser.mail2 ? this.loginUser.mail2 : ''}}).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '发送失败',
            message: res.msg
          })
          //恢复禁用
          this.$refs.codeBtn3.disabled = false
          this.$refs.codeBtn3.classList.remove('disabled')
        } else {
          //发送成功
          this.$notify({
            type: 'success',
            title: '发送成功',
            message: '验证码已发送至' + this.loginUser.mail2
          })
          //显示等待时间，每秒减一次
          this.waitTime = 60
          this.timer3 = setInterval(() => {
            if (this.waitTime > 0) {
              this.waitTime--
            }
          }, 1000)
          //1分钟后恢复按钮禁用
          this.to3 = setTimeout(() => {
            this.$refs.codeBtn3.disabled = false
            this.$refs.codeBtn3.classList.remove('disabled')
          }, 60000)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '发送失败',
          message: err
        })
        //恢复禁用
        this.$refs.codeBtn3.disabled = false
        this.$refs.codeBtn3.classList.remove('disabled')
      })
    },
    //验证注册验证码
    verifyCode() {
      this.request.get('/manager/verify-sign', {
        params: {
          mail: this.user.mail ? this.user.mail : '',
          code: this.user.code ? this.user.code : ''
        }
      }).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '验证失败',
            message: res.msg
          })
        } else {
          //验证成功
          this.$refs.r1.style.left = '450px'
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '验证失败',
          message: err
        })
      })
    },
    //验证登录验证码
    verifyCode2() {
      this.loading = true
      this.request.get('/manager/verify-login', {
        params: {
          mail: this.loginUser.mail1 ? this.loginUser.mail1 : '',
          code: this.loginUser.code1 ? this.loginUser.code1 : ''
        }
      }).then(res => {
        if (res.code !== '200') {
          //登陆失败
          this.$notify({
            title: '登录失败',
            message: res.msg,
            type: 'error'
          })
          //清空密码框
          this.loginUser.password = ''
          this.loading = false
        } else {
          //登录成功
          //将传入的用户信息存入本地内存
          this.loginSuccess(res)
        }
      }).catch(err => {
        this.$notify({
          title: '登录失败',
          message: err,
          type: 'error'
        });
        //清空密码框
        this.loginUser.password = ''
        this.loading = false
      })
    },
    //验证修改密码验证码
    verifyCode3() {
      this.request.get('/manager/verify-change', {
        params: {
          mail: this.loginUser.mail2 ? this.loginUser.mail2 : '',
          code: this.loginUser.code2 ? this.loginUser.code2 : ''
        }
      }).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '验证失败',
            message: res.msg
          })
        } else {
          //验证成功
          this.$refs.l3.style.left = 'calc(50% - 450px)'
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '验证失败',
          message: err
        })
      })
    },
    //返回注册1 页面
    backToR1() {
      this.$refs.r1.style.left = '0'
    },
    //前往注册3 页面
    goToR3() {
      //检测输入
      if (!this.user.name) {
        this.$notify({
          type: 'error',
          title: '名称设置失败',
          message: '未填写姓名'
        })
        return
      }
      if (!this.user.careHomeName) {
        this.$notify({
          type: 'error',
          title: '名称设置失败',
          message: '未填写养老院名'
        })
        return
      }
      this.$refs.r2.style.left = '50%'
    },
    backToR2() {
      this.$refs.r2.style.left = 'calc(50% - 450px)'
    },
    //注册
    register() {
      //检查两次密码是否一致
      if (this.user.password !== this.user.confirm) {
        this.$notify({
          type: 'error',
          title: '注册失败',
          message: '两次密码输入不一致'
        })
        return
      }
      if (!this.user.password || !this.user.confirm) {
        this.$notify({
          type: 'error',
          title: '注册失败',
          message: '未设置密码'
        })
        return
      }
      //注册
      const md5Password = this.user.password ? this.md5(this.user.password) : ''
      this.request.post('/user/register', {
        name: this.user.name,
        password: md5Password,
        mail: this.user.mail,
        careHomeName: this.user.careHomeName
      }).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '账号已成功注册'
          })
          this.registerRecall(true)
        } else {
          this.$notify({
            type: 'error',
            title: '注册失败',
            message: res.msg
          })
          this.registerRecall(false)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '注册失败',
          message: err
        })
        this.registerRecall(false)
      })
    },
    //注册回调
    registerRecall(b) {
      this.status = b
      this.$refs.r3.style.left = '50%'
    },
    //返回注册3
    backToR3() {
      this.$refs.r3.style.left = 'calc(50% - 450px)'
    },
    //前往邮箱登录
    goToL2() {
      this.$refs.l1.style.right = '450px'
      this.$refs.l3.style.left = 'calc(50% - 450px)'
    },
    //前往找回密码
    goToL3() {
      this.$refs.l1.style.right = '450px'
      this.$refs.l2.style.left = 'calc(50% - 450px)'
    },
    //返回密码登录
    mailBack() {
      this.$refs.l1.style.right = '0'
      this.$refs.l3.style.left = '50%'
    },
    //找回密码返回登录
    findBack() {
      this.$refs.l1.style.right = '0'
      this.$refs.l2.style.left = '50%'
    },
    //返回找回密码页面
    backToL3() {
      this.$refs.l3.style.left = '50%'
    },
    //修改密码
    changePassword() {
      //检查两次密码是否一致
      if (this.loginUser.pass !== this.loginUser.confirm) {
        this.$notify({
          type: 'error',
          title: '密码修改失败',
          message: '两次密码输入不一致'
        })
        return
      }
      if (!this.loginUser.pass || !this.loginUser.confirm) {
        this.$notify({
          type: 'error',
          title: '密码修改失败',
          message: '未设置密码'
        })
        return
      }
      //改密码
      console.log(this.loginUser, this.user)
      const md5Password = this.loginUser.pass ? this.md5(this.loginUser.pass) : ''
      this.request.put(`/user/change-password?password=${md5Password}&mail=${this.loginUser.mail2}`).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '已成功修改密码'
          })
          this.changeRecall(true)
        } else {
          this.$notify({
            type: 'error',
            title: '密码修改失败',
            message: res.msg
          })
          this.changeRecall(false)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '密码修改失败',
          message: err
        })
        this.changeRecall(false)
      })
    },
    //修改密码回调
    changeRecall(b) {
      this.status = b
      this.$refs.l4.style.left = 'calc(50% - 450px)'
    },
    //从结果返回设置密码
    backToL4() {
      this.$refs.l4.style.left = '50%'
    },
    //登录成功
    loginSuccess(res) {
      localStorage.setItem('user', JSON.stringify(res.data))
      setRoutes()
      this.loading = false
      //跳转至首页
      this.$router.push('/elder')
      //弹窗
      this.$notify({
        title: '登录成功',
        type: 'success'
      })


    }
  },
  beforeDestroy() {
    //关闭所有计时器
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
    clearTimeout(this.to1)
    clearTimeout(this.to2)
    clearTimeout(this.to3)
  },

}
</script>

<style scoped>

>>> .el-loading-mask {
  width: 100%;
  height: 100%;
  background-color: var(--deepBg);
  opacity: 0.7;
}

>>> .el-card {
  border: none;
}

>>> .el-card__body {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.container {
  width: 450px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: var(--btn);
  color: var(--btnText);
  border-radius: 10px 0 0 10px;
  position: absolute;
  left: calc(50% - 450px);
  z-index: 10;
  transition: 0.8s ease;
}

.containerLeft {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--deepBg);
  color: var(--deepText);
  position: relative;
  border-radius: 10px 0 0 10px;
  transition: 0.8s ease;
  left: 0;
}

.containerRight {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--deepBg);
  color: var(--deepText);
  position: relative;
  border-radius: 0 10px 10px 0;
  transition: 0.8s ease;
  right: 0;
}

>>> .el-input__inner {
  width: 300px;
  border-radius: 0;
  border-width: 0 0 2px 0;
  padding-left: 0;
  color: var(--deepText);
  font-weight: bold;
  background-color: var(--deepBg);
}


.btn {
  width: 200px;
  margin: 80px auto 0;
  background-color: var(--btn);
  transition: 0.4s;
  color: var(--btnText);
  font-weight: lighter;
  font-size: 30px;
  border-radius: 25px;
  border: none;
}

.btn:hover {
  background-color: var(--btnActive);
}

.aText {
  cursor: pointer;
  transition: 0.2s;
  text-decoration: underline 1px var(--deepBg);
  text-underline-offset: 3px;
}

.aText:hover {
  color: var(--btnActive);
  text-decoration: underline 1px var(--btnActive);
}

.rText {
  cursor: pointer;
  transition: 0.2s;
  text-decoration: underline 1px var(--btn);
  text-underline-offset: 4px;
}

.rText:hover {
  color: var(--hover);
  text-decoration: underline 1px var(--hover);
}

.getCode {
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
  transition: 0.4s;
  border-radius: 3px;
  cursor: pointer;
  padding: 7px 8px;
  position: relative;
  bottom: 32px;
}

.getCode:hover {
  background-color: var(--btnActive);
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.logo-container {
  width: 450px;
  height: 240px;
  padding-top: 40px;
  display: flex;
  justify-content: center;
  border-radius: 50%; /*!* 将容器变成圆形 *!*/
  overflow: hidden; /* 隐藏超出边界的部分，以确保是圆形 */
}

.logo {
  height: 150px;
  object-fit: cover; /* 保持图片比例并填充容器 */
  border-radius: 50%; /* 使图片也成为圆形 */
}

.background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23000000' fill-opacity='0.22' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
  /*background-image:  linear-gradient(#4169e1 1.8px, transparent 1.8px), linear-gradient(to right, #4169e1 1.8px, #e5e5f7 1.8px);*/
  /*background-size: 75px 75px;*/
}

.float {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232d2d2d' fill-opacity='0.81' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.codeInput >>> .el-input__inner{
  width: 195px;
}
</style>